<template>
  <a-layout>
    <a-layout-sider width="300" style="background: #fff">
      <a-table
        size="small"
        :columns="columns"
        :dataSource="apiData"
        :pagination="false"
        :showHeader="false"
        :indentSize="30"
      />
    </a-layout-sider>
    <a-layout-content>
      <a-breadcrumb style="padding: 10px">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
        <a-breadcrumb-item>An Application</a-breadcrumb-item>
      </a-breadcrumb>
      <a-layout-content>
        <!-- 接口请求部分 -->
        <a-input-group compact>
          <a-select value="GET" style="width: 100px">
            <a-select-option value="GET">GET</a-select-option>
            <a-select-option value="POST">POST</a-select-option>
          </a-select>
          <a-input style="width: 50%" :value="url" />
          <a-button type="primary">发送</a-button>
        </a-input-group>
        <a-tabs>
          <a-tab-pane key="1" tab="参数">
            <param-table title="查询参数" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="权限">[TODO]</a-tab-pane>
          <a-tab-pane key="3" tab="请求头"
            ><param-table title="请求头"
          /></a-tab-pane>
          <a-tab-pane key="4" tab="请求体">[TODO]</a-tab-pane>
          <a-tab-pane key="5" tab="请求脚本">[TODO]</a-tab-pane>
          <a-tab-pane key="6" tab="测试脚本">[TODO]</a-tab-pane>
        </a-tabs>
      </a-layout-content>
      <!-- 接口响应部分 -->
      <a-layout-footer><response-view /></a-layout-footer>
    </a-layout-content>
  </a-layout>
</template>

<script>
import ParamTable from "@/components/test-manage/ParamTable.vue";
import ResponseView from "@/components/test-manage/ResponseView.vue";

export default {
  name: "ApiTest",
  components: { ParamTable, ResponseView },
  data() {
    return {
      url: "http://www.baidu.com",
      columns: [{ title: "", key: "name", dataIndex: "name" }],
      apiData: [
        {
          key: 0,
          name: "测试接口目录1",
          children: [
            {
              key: 1,
              name: "测试接口1",
              children: [{ key: 1, name: "测试接口1" }],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style scoped>
.ant-layout-sider {
  min-width: 300px;
}

.ant-layout-content {
  padding: 10px;
}

.ant-layout-footer {
  padding: 10px;
}

.ant-table td {
  white-space: nowrap;
}
</style>